<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统 - 报表统计</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#165DFF",
                        secondary: "#36CFC9",
                        success: "#52C41A",
                        warning: "#FAAD14",
                        danger: "#FF4D4F",
                        info: "#8C8C8C",
                        "bg-light": "#F5F7FA",
                        "bg-dark": "#1D2129",
                        // 新增分类颜色定义
                        category: {
                            blue: '#165DFF',
                            green: '#52C41A',
                            purple: '#722ED1',
                            yellow: '#FAAD14',
                            gray: '#8C8C8C'
                        }
                    },
                    fontFamily: {
                        inter: ["Inter", "system-ui", "sans-serif"],
                    },
                    boxShadow: {
                        card: "0 4px 20px rgba(0, 0, 0, 0.08)",
                        "card-hover": "0 8px 30px rgba(0, 0, 0, 0.12)",
                        nav: "0 4px 20px rgba(0, 0, 0, 0.05)",
                    },
                },
            },
        };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .category-badge {
                @apply inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }

            .category-blue {
                @apply category-badge bg-blue-100 text-blue-800;
            }

            .category-green {
                @apply category-badge bg-green-100 text-green-800;
            }

            .category-purple {
                @apply category-badge bg-purple-100 text-purple-800;
            }

            .category-yellow {
                @apply category-badge bg-yellow-100 text-yellow-800;
            }

            .category-gray {
                @apply category-badge bg-gray-100 text-gray-800;
            }
        }
    </style>
    <style type="text/tailwindcss">
        @layer utilities {
            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }

            .animate-slide-up {
                animation: slideUp 0.3s ease-out;
            }
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body class="font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>
    <!-- 侧边栏 -->
    <sidebar></sidebar>
    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>

    <!-- 主内容区 -->
    <main class="pt-16 lg:pl-64 min-h-screen">
        <div class="container mx-auto px-6 py-8">
            <div class="animate-fade-in">
                <!-- 页面标题 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">信息学院报表统计</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">查看并下载信息学院最新报表</p>
                    </div>
                </div>

                <!-- 报表列表 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead>
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                编号
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                类型
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                标题/名称
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                发布时间
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                文件大小
                            </th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <tr v-for="report in reports" :key="report.id"
                            class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">{{ report.id }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <!-- 修改类名引用方式 -->
                                <span :class="report.typeClass">
                                            {{ report.type }}
                                        </span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ report.title }}</td>
                            <td class="px-4 py-4 whitespace-nowrap">{{ report.publishTime }}</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                                {{ report.fileSize }}
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right">
                                <a :href="report.downloadLink" download
                                   class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-download mr-1"></i> 下载
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700 dark:text-gray-300">
                                    显示第 <span class="font-medium">{{ (currentPage - 1) * itemsPerPage + 1 }}</span> 到
                                    <span class="font-medium">{{
                                            Math.min(currentPage * itemsPerPage, filteredReports.length)
                                        }}</span> 条，
                                    共 <span class="font-medium">{{ filteredReports.length }}</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <button @click="prevPage" :disabled="currentPage === 1"
                                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left text-xs"></i>
                                    </button>
                                    <button v-for="page in Math.ceil(filteredReports.length / itemsPerPage)" :key="page"
                                            @click="currentPage = page"
                                            :class="{
                                                'z-10 bg-primary text-white border-primary': currentPage === page,
                                                'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600': currentPage !== page
                                            }"
                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                        {{ page }}
                                    </button>
                                    <button @click="nextPage"
                                            :disabled="currentPage === Math.ceil(filteredReports.length / itemsPerPage)"
                                            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right text-xs"></i>
                                    </button>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<script src="/static/js/top.js"></script>
<script src="/static/js/aside.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            sidebarOpen: false,
            darkMode: false,
            reports: [
                {
                    id: 'INFO-2025001',
                    type: '公告',
                    typeClass: 'category-blue',
                    title: '2025年夏季学期期末考试安排',
                    publishTime: '2025-06-10',
                    fileSize: '328KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025002',
                    type: '通知',
                    typeClass: 'category-green',
                    title: '关于2025届毕业生学位授予仪式的通知',
                    publishTime: '2025-05-25',
                    fileSize: '256KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025003',
                    type: '政策',
                    typeClass: 'category-purple',
                    title: '信息学院研究生推免工作实施细则(2025修订)',
                    publishTime: '2025-05-15',
                    fileSize: '412KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025004',
                    type: '文档',
                    typeClass: 'category-gray',
                    title: '信息学院2025年本科教学质量报告',
                    publishTime: '2025-04-30',
                    fileSize: '1.2MB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025005',
                    type: '公告',
                    typeClass: 'category-blue',
                    title: '2025年国家奖学金评选通知',
                    publishTime: '2025-09-15',
                    fileSize: '189KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025006',
                    type: '指南',
                    typeClass: 'category-yellow',
                    title: '信息学院实验室安全手册(2025版)',
                    publishTime: '2025-03-20',
                    fileSize: '856KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025007',
                    type: '通知',
                    typeClass: 'category-green',
                    title: '关于2025年暑假放假安排的通知',
                    publishTime: '2025-06-20',
                    fileSize: '156KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025008',
                    type: '政策',
                    typeClass: 'category-purple',
                    title: '信息学院学生创新创业学分认定办法',
                    publishTime: '2025-02-10',
                    fileSize: '215KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025009',
                    type: '文档',
                    typeClass: 'category-gray',
                    title: '信息学院2025年科研成果统计报告',
                    publishTime: '2025-01-15',
                    fileSize: '2.4MB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025010',
                    type: '公告',
                    typeClass: 'category-blue',
                    title: '2025年秋季学期课程表及选课指南',
                    publishTime: '2025-08-25',
                    fileSize: '324KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025011',
                    type: '通知',
                    typeClass: 'category-green',
                    title: '关于开展2025年度教师教学能力提升培训的通知',
                    publishTime: '2025-07-10',
                    fileSize: '287KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025012',
                    type: '指南',
                    typeClass: 'category-yellow',
                    title: '信息学院本科毕业设计(论文)撰写规范',
                    publishTime: '2025-04-05',
                    fileSize: '198KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025013',
                    type: '政策',
                    typeClass: 'category-purple',
                    title: '信息学院研究生学术规范与学术道德规范',
                    publishTime: '2025-03-15',
                    fileSize: '235KB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025014',
                    type: '文档',
                    typeClass: 'category-gray',
                    title: '信息学院2025年学科建设规划',
                    publishTime: '2025-01-05',
                    fileSize: '1.8MB',
                    downloadLink: '/static/file/学院报表.docx'
                },
                {
                    id: 'INFO-2025015',
                    type: '公告',
                    typeClass: 'category-blue',
                    title: '2025年信息学院优秀学生干部评选结果公示',
                    publishTime: '2025-10-05',
                    fileSize: '176KB',
                    downloadLink: '/static/file/学院报表.docx'
                }
            ],
            currentPage: 1,
            itemsPerPage: 10,
        },
        computed: {
            filteredReports() {
                return this.reports;
            },
            reports() {
                const startIndex = (this.currentPage - 1) * this.itemsPerPage;
                const endIndex = startIndex + this.itemsPerPage;
                return this.filteredReports.slice(startIndex, endIndex);
            },
            totalPages() {
                return Math.ceil(this.filteredReports.length / this.itemsPerPage);
            }
        },
        methods: {
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                }
            }
        },
        mounted() {
            this.filteredReports = this.reports;
        }
    });
</script>
</body>
</html>